<template>
  <div class="container">
    <div class="topSearch card-search">
      <el-form :inline="true" :model="formInline" key="1" class="demo-form-inline">
        <el-form-item label="炉号">
          <el-select size="small" v-model="formInline.types" clearable>
            <!-- 这个options得掉接口 -->
            <el-option
              v-for="item in optionssearch"
              :key="item.stoveNumber"
              :label="item.stoveNumber + '号'"
              :value="item.stoveNumber">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button  type="primary" @click="getMachineData">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- <div class="btnAdd">
        <el-button icon="el-icon-plus" type="primary" @click="addWorkOrder">增加</el-button>
      </div> -->
    </div>
    <div class="card-table">
      <tableContent :tabledata="this.TABLEdata">
        <!-- <el-table-column
          slot="status"
          label="状态"
          align="center">
          <template slot-scope="scope">
            <el-tag size="medium" :type="scope.row.status === '已出炉' ? 'success' : 'primary'">{{scope.row.status}}</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column
          slot="operation"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <!--  :disabled="disByHours(scope.row)" -->
              <!-- <el-button type="text" class="btnText" size="small">出炉</el-button> -->
              <el-button type="text" class="btnText" size="small" @click="checkStove(scope.row)">质检</el-button>
              <!--  @click="detail(scope.row)" -->
          </template>
        </el-table-column>
      </tableContent>
      <div
        class="block"
        style="display: flex; flex-direction: row-reverse; margin-top: 10px; padding-right: 10px"
      >
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currPage"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// import { profileCreate, profileEdit } from '@/api/profileApi/profileOrder.js'
import { getBurnOrderData, getStoveNumData } from '@/api/stoveApi/stoveWorker.js'
import tableContent from '@/components/tableContent/index.vue'
import { changeAble } from '@/mixin/changeAble.js'
import { mapGetters } from 'vuex'
export default {
  name: 'firstBurn',
  components: {
    tableContent
  },
  mixins: [changeAble],
  data () {
    return {
      TABLEdata: {
        formHead: [],
        tableAllData: []
      },
      formInline: {
        // typesProductType: '',
        types: ''
        // typesDiameter: ''
      },
      ruleForm: {
        createNumWay: true
      },
      addEditDialogTableVisible: false,
      dialogTitle: '',
      inputOven: false,
      numberAble: true,
      datePicker: '',
      optionssearch: [],
      inputType: '', // 自定义规格型号
      inputDiameterType: '',
      operations: '',
      pageSize: 10,
      currPage: 1,
      total: 50
    }
  },
  props: {
  },
  computed: {
    ...mapGetters({
      getUserInfos: 'getUserInfo'
    }),
    disByHours () {
      return function (val) {
        console.log(this.contrastTime(val))
        return this.contrastTime(val)
      }
    }
  },
  created () {
    this.getStoveNum()
    this.getMachineData()
  },
  mounted () {
    this.checkName = this.getUserInfos.account
  },
  methods: {
    getRowClass ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'color: rgb(63,66,84);font-weight: bold;font-size: 14px'
      } else {
        return ''
      }
    },
    getStoveNum () {
      getStoveNumData().then(res => {
        this.optionssearch = res.data.data
      })
    },
    // outOven (row) {
    //   console.log(row)
    //   this.dialogTitle = '出炉工单'
    //   this.operations = 'out'
    //   this.inputOven = true
    //   this.numberAble = true
    //   this.addEditDialogTableVisible = true
    //   this.ruleForm = row
    // },
    checkStove (row) {
      console.log('zhijan', row)
      var arg = JSON.stringify({
        createTime: row.createTime,
        stoveNumber: row.stoveNumber
      })
      console.log('arg', arg)
      this.$router.push({
        name: 'FBCheckOrder',
        query: {
          orderId: row._id,
          // type: 'showByorders',
          mes: arg
        }
      })
    },
    // checkStove (row) {
    //   this.operations = 'edit'
    //   var formCopys = JSON.stringify(row)
    //   this.$router.push({
    //     name: 'firstBurnAdd',
    //     query: {
    //       type: this.operations,
    //       formCopy: formCopys
    //     }
    //   })
    // },
    // addWorkOrder () {
    //   this.operations = 'add'
    //   // this.numberAble = false
    //   this.$router.push({
    //     name: 'firstBurnAdd',
    //     query: {
    //       type: this.operations
    //     }
    //   })
    // },
    // submitForm (formName) {
    //   this.$nextTick(
    //     this.$refs[formName].validate((valid) => {
    //       if (valid) {
    //         if (this.operations === 'add') {
    //         // this.ruleForm.state = '待出炉'
    //           this.ruleForm.writeMan = this.checkName // 质检人
    //           if (this.ruleForm.diameterSpecification === '其他') {
    //             this.ruleForm.diameterSpecification = this.inputDiameterType
    //           }
    //           if (this.ruleForm.specification === '其他') {
    //             this.ruleForm.specification = this.inputType
    //           }
    //           console.log('增加的ruleForm', this.ruleForm)
    //           profileCreate(this.ruleForm).then(res => { // 加编号重复的判断
    //             console.log('创建设备类型', res.data)
    //             if (res.data.code === 200) {
    //               this.$message({
    //                 showClose: true,
    //                 message: '创建成功',
    //                 type: 'success'
    //               })
    //               this.addEditDialogTableVisible = false
    //             } else {
    //               this.$message({
    //                 message: res.data.message,
    //                 type: 'warning'
    //               })
    //               this.addEditDialogTableVisible = true
    //             }
    //             this.getMachineData()
    //           })
    //         } else {
    //           this.ruleForm.writeMan = this.checkName // 质检人
    //           if (this.ruleForm.diameterSpecification === '其他') {
    //             this.ruleForm.diameterSpecification = this.inputDiameterType
    //           }
    //           if (this.ruleForm.specification === '其他') {
    //             this.ruleForm.specification = this.inputType
    //           }
    //           console.log('编辑的ruleForm', this.ruleForm)
    //           profileEdit(this.ruleForm).then(res => {
    //             console.log('编辑成功没', res.data)
    //             if (res.data.code === 200) {
    //               this.$message({
    //                 showClose: true,
    //                 message: '编辑成功',
    //                 type: 'success'
    //               })
    //             } else {
    //               this.$message({
    //                 message: '编辑失败',
    //                 type: 'warning'
    //               })
    //             }
    //             this.getMachineData()
    //             this.addEditDialogTableVisible = false
    //           })
    //         }
    //       } else {
    //         console.log('error submit!!')
    //         return false
    //       }
    //     })
    //   )
    // },
    cancelForm () {
      this.ruleForm = {
        createNumWay: true
      }
      this.inputType = ''
      this.inputDiameterType = ''
      this.addEditDialogTableVisible = false
    },
    getMachineData () {
      const params = {
        pageSize: this.pageSize,
        currPage: this.currPage,
        stoveNumber: this.formInline.types
      }
      getBurnOrderData(params).then(res => {
        if (res.data.code === 200) {
          console.log('一烧工单table', res.data)
          var formHead = [
            { stoveNumber: '炉号' },
            { inStoveTime: '装炉时间' },
            { createTime: '工单生成时间' },
            { writeMan: '工单填写人' }
            // { cokeRatio: '焦配比说明' }
          ]
          this.TABLEdata.formHead = formHead
          var tableBody = JSON.parse(JSON.stringify(res.data.data.data))
          console.log('tableBody', tableBody)
          tableBody.forEach((item) => {
            item.completeCreateTime = item.createTime
            if (item.createTime.length === 19) {
              item.createTime = item.createTime.substring(5, 16)
            }
          })
          this.TABLEdata.tableAllData = tableBody
          this.total = res.data.data.totalCount
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getMachineData()
    },
    handleCurrentChange (val) {
      this.currPage = val
      this.getMachineData()
    }
  }
}
</script>

<style  scoped>
.container {
  .topSearch {
    background-color: #fff;
    padding: 20px 20px 0px 30px;
    box-sizing: border-box;
    margin-bottom: -40px;
    display: flex;
    justify-content: space-between;
    .btnAdd {
      padding: 5px 3px 10px 1px;
    }
  }
  .btnText {
    color: $primary;
  }
  .el-switch {
    margin: -1px 0 0 10px;
     .el-switch__label {
      color: #84868a;
    }
     .el-switch__label.is-active {
      color: #4D70FF;
    }
  }
  .dail {
     .el-dialog__body {
      padding-top: 10px !important;
    }
     .el-divider--horizontal {
      margin: 0 0 28px 0;
    }
    .groupsInput {
       .el-form-item__content {
        display: flex;
        .inp {
          .el-input__inner {
            width: 40%;
            margin-left: 20px;
          }
        }
      }
    }
    .btnflex {
      display: flex;
      justify-content: flex-end;
       .el-form-item__content {
        margin-right: 10px;
        .el-button {
          margin-left: 40px;
        }
      }
    }
    .dateClass {
      display: flex;
      .line {
        margin-left: -40px;
        font-weight: bold;
        width: 30px;
      }
    }
  }
}
</style>
